<template>
<user-card-list :user-list="userList" />
<van-empty v-if="!userList || userList.length < 1" description="搜索结果为空" />
</template>
    
<script setup>
import { onMounted, ref } from "vue";
import {useRoute} from "vue-router";
import myAxios from "../plugins/myAxios";
import { showToast } from 'vant';
import UserCardList from "../components/UserCardList.vue";
import QS from "qs"

const route = useRoute();
const {tags} =route.query

const userList = ref([]);

onMounted(async () => {
  // 上面的请求也可以这样做
const userListDate = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList:tags
    },  
    paramsSerializer: {
     serialize: function (params) {
          return QS.stringify(params, { indices: false })
        }}
  })
  .then(function (response) {
    console.log('/user/search/tags',response);
    showToast('请求成功');
    // console.log(response);
    return response?.data;
  })
  .catch(function (error) {
    console.error('/user/search/tags',error);
    showToast('请求失败');
  })
  // console.log(userListDate);
  if(userListDate) {
    userListDate.forEach(user => {
      if(user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListDate;
  }

})


// const mackUser = {
//     id: 123321,
//     username: '喜欢钱',
//     userAccount: '12358',
//     avatarUrl: 'https://www.runoob.com/wp-content/uploads/2013/07/css-logo.png',
//     gender: 0,
//     profile:'一名在家学习vue的大三学生，emo状态中',
//     phone: '12345678901',
//     email: '1458756125@qq.com',
//     UserRole: 0,
//     planetCode: '1234',
//     tags: ['Vue','emo','备考','打工人','母胎solo'],
//     createTime: new Date(),
// }

</script>
<style>
    
</style>